<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>添加车辆</title>
<link rel="stylesheet"
	href="${ctx}/static/plug/frozenui-1.3.0/css/frozen.css" media="all">
<link rel="stylesheet" href="${ctx}/static/css/user/addCarNo.css"
	media="all">
<link rel="stylesheet" href="${ctx}/static/css/user/pretty.css"
	media="all">
<link rel="stylesheet"
	href="https://cdn.materialdesignicons.com/1.8.36/css/materialdesignicons.min.css" />
<style type="text/css">
.content {
	padding-top: 10px;
	padding-left: 20px;
	padding-right: 20px
}

.demo-block {
	position: relative;
	z-index: 99999999;
}

.demo-block .ui-header, .demo-block .ui-footer {
	position: absolute;
}

.demo-block>.ui-list, .demo-block>.ui-form, .demo-block>.ui-tooltips {
	margin-bottom: 20px;
}

.error {
	color: red;
	font-size: 25px
}
.content-car-number>div>span {
    font-size: 0.2rem;
    line-height: 0.5rem;
    text-align: center;
    width: 100%;
    height: 100%;
    border-radius: 0.08rem;
    display: inline-block;
}
.content-car-number div {
    width: 0.5rem;
    height: 0.5rem;
    border: 0.01rem solid #0f71c3;
    border-radius: 0.08rem;
    margin-right: 0.08rem;
    background: #fff;
}
.content-car-number {
    margin-top: 0.6rem;
    margin-bottom: 0.8rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
}
.car_inputs{
	margin: 0 auto;
    max-width: 3.5rem;
    font-size: 0.3rem;
}
 .xtc__item_car{
            width: 50%;
            float: left;
            font-size: 0.1rem;
    		text-align: center;
    		color: #747474;
   			margin-bottom: 0.8rem;
    }
.xtc__item_car img {
    margin-right: 0.15rem;
    width: 0.3rem;
    max-width: 100%;
    height: auto;
    -ms-interpolation-mode: bicubic;
    display: inline-block;
    vertical-align: middle;
}
</style>
</head>
<body>
	<input type="hidden" id="userId" value="${userId}" />
	<section class="ui-container">
		<input type="hidden" id="remark" value="${remark}" />
		<div class="">
			<div class="car_inputs">
				 <div class="content-car-number car_input" data-pai="">
					 <div class="input_pro" ><span></span></div>
                	<div class="input_pp input_zim" nextIndex="0"><span></span></div>
                	<div class="input_pp" nextIndex="1"><span></span></div>
                	<div class="input_pp" nextIndex="2"><span></span></div>
                	<div class="input_pp" nextIndex="3"><span></span></div>
                	<div class="input_pp" nextIndex="4"><span></span></div>
                	<div class="input_pp" nextIndex="5"><span></span></div>
                	<div class="input_pp" nextIndex="6" style="display: none"><span></span></div>
				</div>
			</div>
		</div>
		<div >
			 <div class="xtc__item_car" data-type="1">
                    <img src="" alt=""><span>新能源车牌</span>
                </div>

                <div class="xtc__item_car" data-type="2">
                    <img src="" alt=""><span>教练车车牌</span>
                </div>
			
		</div>
	</section>

	<section id="dialog">
		<div class="demo-block">
			<div class="ui-dialog ">
				<div class="ui-dialog-cnt" style="width: 80%">
					<header class="ui-dialog-hd ui-border-b">
						<h1 class="ui-icon-info"></h1>
					</header>
					<div class="ui-dialog-bd">
						<p align="center"></p>
					</div>
					<div class="ui-dialog-ft">
						<button type="button" id="btnRemoveBind" data-role="button">确定</button>
						<button type="button" id="btnCancel" data-role="button">取消</button>
					</div>
				</div>
			</div>
		</div>
	</section>

	<div class="ui-footer ui-footer-stable ui-btn-group ui-border-t"
		style="background-image: none;">
		<button class="ui-btn-lg ui-btn-primary" id="btnAddCarNo">添加车辆</button>
		<button class="ui-btn-lg ui-btn-primary" id="toCarList">返回车牌列表</button>
	</div>
	
</body>
<script src="${ctx}/static/plug/frozenui-1.3.0/lib/zepto.min.js"></script>
<script src="${ctx}/static/plug/frozenui-1.3.0/js/frozen.js"></script>
<script src="${ctx}/static/js/common.js"></script>
<script src="${ctx}/static/js/user/addCarNo.js"></script>
<script src="${ctx}/static/plug/layer_mobile/layer.js"></script>
<script>
	$(function() {
		var carNo;
		$("#btnCancel").click(function() {
			$(".ui-dialog").removeClass("show");
		});

		

		var paramObj = {
			"generateCouponParams" : "${generateCouponParams}",
			"couponParams" : "${couponParams}",
		};
		$("#toCarList").click(function(){
			var userId = $("#userId").val();
			var hrefUrl = "${action}?params="+ paramObj.couponParams +"&userId=" + userId;
			window.location.replace(hrefUrl);
		});

		$("#btnAddCarNo").click(
				function() {
					carNo = $(".content-car-number").find("span").text();
		                if($(".content-car-number div").last().css("display") == "none" && carNo.length != 7){
		                    layer.open({
		                        content: "普通车牌为7位！"
		                        ,skin: 'msg'
		                        ,time: 2 //2秒后自动关闭
		                    });
		                    return;
		                }
		                if($(".content-car-number div").last().css("display") != "none" && carNo.length != 8){
		                    layer.open({
		                        content: "新能源车牌为8位！"
		                        ,skin: 'msg'
		                        ,time: 2 //2秒后自动关闭
		                    });
		                    return;
		                }
					$(".ui-dialog").addClass("show");
					$(".ui-dialog-bd p").html("车牌是否为："+carNo);
				});

		$("#btnRemoveBind").click(
				function() {
					var userId = $("#userId").val();
					var hrefUrl = "${action}?params="+ paramObj.generateCouponParams +"&userId=" + userId + "&carNo=" + carNo;
					 window.location.replace(hrefUrl);
				
				});
	});
</script>
</html>